<!--  -->
<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button
        style="float: right"
        size="small"
        type="primary"
        @click="$emit('cancel')"
        >返回</el-button
      >
    </div>
    <div>
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="登录名" prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="请输入登录名"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="this.form.id == null">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="性别" prop="sex">
              <el-select
                v-model="form.sex"
                placeholder="请选择性别"
                style="width: 80%"
              >
                <el-option :value="0" label="男" />
                <el-option :value="1" label="女" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input
                v-model="form.nickName"
                placeholder="请输入用户昵称"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="电话号码" prop="phoneNumber">
              <el-input
                v-model="form.phoneNumber"
                placeholder="请输入电话号码"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="电子邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入电子邮箱"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户角色" prop="roles">
              <el-select
                v-model="roleIds"
                placeholder="请选择角色信息"
                style="width: 80%"
                multiple
              >
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否启用" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="居住地址" prop="address">
              <el-input
                type="textarea"
                style="width: 80%"
                show-word-limit
                maxlength="100"
                :autosize="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入居住地址"
                v-model="form.address"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户头像" prop="avatar">
              <!-- 
                action:  上传地址
                show-file-list: 是否显示已上传文件列表
              -->
              <el-upload
                class="avatar-uploader"
                :action="action"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('cancel')">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    //这里存放数据
    return {
      rules: {
        userName: [
          { required: true, message: "请输入登录名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "登录名的长度为2~20之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        phoneNumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            message: "电话号码输入不正确",
            trigger: "blur",
            pattern: /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/,
          },
        ],
        avatar: [
          {
            required: true,
            validator: (rule, val, callback) => {
              if (
                this.form.avatar === null ||
                this.form.avatar === "" ||
                this.form.avatar === undefined
              ) {
                callback(new Error("请上传用户头像"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      imageUrl: null,
      action: `${process.env.VUE_APP_BASE_URL}/tool/upload`,
      headers: {
        Authorization: sessionStorage.getItem("token"),
      },
      roleList: [],
      roleIds: [],
    };
  },

  //监听属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  // 接收父组件传递的值
  props: ["title", "form"],
  watch: {
    form: {
      handler(val, old) {
        console.log("表单值", val);
        this.roleIds = [];
        if (val.name) {
          this.form.userName = val.name;
        }
        // 根据图片路径前缀回显头像
        this.imageUrl = val.avatar.startsWith("https")
          ? val.avatar
          : this.$qiniu + val.avatar;

        // 回显角色信息（select选择器v-model绑定的值与option绑定的value对应）
        if (val.roles && val.roles.length > 0) {
          val.roles.forEach((item) => {
            this.roleIds.push(item.id);
          });
        }
      },
    },
  },

  //方法集合
  methods: {
    /**
     * 头像上传成功
     * res: 后端返回参数
     * file: 上传文件的信息
     */
    handleSuccess(res, file) {
      this.imageUrl = this.$qiniu + res.data;
      this.form.avatar = res.data;
    },

    /**
     * 头像上传前执行
     * file: 可以判断文件类型和文件大小
     */
    beforeUpload(file) {
      // 判断文件大小  不能大于10M
      if (file.size > 10 * 1024 * 1024) {
        this.$message.warning("文件大小不能超过10M！");
        return false;
      }

      // 判断文件后缀
      let index = file.name.lastIndexOf(".");
      let suffix = file.name.substring(index + 1);
      if (suffix !== "jpg" && suffix !== "png" && suffix !== "jpeg") {
        this.$message.warning("请上传jpg、jpeg、png格式的图片！");
        return false;
      }
    },

    /* 点击确定 */
    clickOk() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (!valid)
          return this.$message.error("表单检验不通过，请检查后再提交！");

        let arr = [];
        this.roleIds.forEach((item) => {
          arr.push({ id: item });
        });
        this.form.roles = arr;
        // 判断是添加还是修改(是否传递id过来)
        if (!this.form.id) {
          this.$ajax.post("/user/insert", this.form).then((res) => {
            // this.$message.success("用户信息添加成功！");
            this.$message.success(res.message);
            return this.$emit("cancel");
          });
        } else {
          this.$ajax.put("/user/update", this.form).then((res) => {
            // this.$message.success("用户信息修改成功！");
            this.$message.success(res.message);
            return this.$emit("cancel");
          });
        }
      });
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.$ajax.get("/role/findAll").then((res) => {
      this.roleList = res.data;
    });
  },
};
</script>
<style scoped>
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
.clearfix {
  text-align: left;
}
</style>
